import React, { useState } from "react";
import { 
  Button, Card, Row, Col, Typography, Divider, Tag, Badge, InputNumber, Tabs, 
  Rate, message
} from "antd";
import { 
  LeftOutlined, ShoppingCartOutlined, HeartOutlined, ShareAltOutlined 
} from "@ant-design/icons";
//点击商品后查看商品详情
const { Title, Text } = Typography;
const { TabPane } = Tabs;
// 商品详情页组件
interface ProductDetailPageProps {
  isMobile: boolean;
  product: any;
  onBack: () => void;
  addToCart: (product: any) => void;
  onBuyNow: (product: any) => void;
  setActiveTab: (tab: string) => void;
}

export default function ProductDetailPage({ 
  isMobile, 
  product,
  onBack,
  addToCart,
  onBuyNow,
  setActiveTab
}: ProductDetailPageProps) {
  const [selectedColor, setSelectedColor] = useState("黑色");
  const [selectedStorage, setSelectedStorage] = useState("128G");
  const [quantity, setQuantity] = useState(1);
  
  // 颜色选项
  const colors = ["黑色", "白色", "蓝色", "绿色"];
  
  // 存储选项
  const storages = ["128G", "256G", "512G", "1T"];
  
  // 商品参数
  const specifications = [
    { name: "品牌", value: "品牌产品" },
    { name: "型号", value: "Pro" },
    { name: "处理器", value: "优质屏幕" },
    { name: "屏幕", value: "6.73英寸 2K AMOLED" },
    { name: "刷新率", value: "120Hz" },
    { name: "摄像头", value: "5000万主摄 + 1300万超广角 + 500万微距" },
    { name: "电池", value: "4500mAh" },
    { name: "快充", value: "67W有线快充" },
    { name: "系统", value: "MIUI 13" },
  ];

  return (
    <div style={{ 
      padding: isMobile ? "8px" : "16px", 
      minHeight: "100vh",
      paddingBottom: isMobile ? "100px" : "120px"
    }}>
      {/* 顶部导航 */}
      <div style={{ 
        display: "flex", 
        alignItems: "center", 
        marginBottom: 16,
        padding: "12px 0",
        position: "sticky",
        top: 0,
        background: "#fff",
        zIndex: 10
      }}>
        <Button 
          type="text" 
          icon={<LeftOutlined />} 
          onClick={onBack}
          style={{ marginRight: 8 }}
        />
        <Title level={4} style={{ margin: 0 }}>商品详情</Title>
      </div>
      
      {/* 商品图片 */}
      <div style={{ 
        height: isMobile ? 300 : 400, 
        background: "#f5f5f5",
        borderRadius: 8,
        marginBottom: 16,
        display: "flex",
        alignItems: "center",
        justifyContent: "center"
      }}>
        <img 
          src={`/images/${product.image}`} 
          alt={product.name}
          style={{ 
            maxWidth: "100%", 
            maxHeight: "100%",
            objectFit: "contain" 
          }}
        />
      </div>
      
      {/* 商品基本信息 */}
      <Card bordered={false} style={{ marginBottom: 16 }}>
        <Title level={5} style={{ marginBottom: 8 }}>{product.name}</Title>
        <Text type="secondary" style={{ display: "block", marginBottom: 12 }}>
          {product.description}
        </Text>
        
        <div style={{ display: "flex", alignItems: "center", marginBottom: 12 }}>
          <span style={{ 
            fontSize: isMobile ? 20 : 24, 
            color: "#ff4d4f", 
            fontWeight: "bold" 
          }}>
            ¥{product.price}
          </span>
          <span style={{ 
            fontSize: isMobile ? 14 : 16, 
            color: "#999", 
            textDecoration: "line-through",
            marginLeft: 8
          }}>
            ¥{product.originalPrice}
          </span>
          <Tag color="#ff4d4f" style={{ marginLeft: 12 }}>
            {Math.round((1 - product.price / product.originalPrice) * 100)}% OFF
          </Tag>
        </div>
        
        <div style={{ display: "flex", alignItems: "center", marginBottom: 16 }}>
          <Rate 
            disabled 
            defaultValue={product.rating} 
            allowHalf 
            style={{ fontSize: isMobile ? 14 : 16 }} 
          />
          <Text type="secondary" style={{ marginLeft: 8 }}>
            {product.rating} | 已售 {product.sales}件
          </Text>
        </div>
      </Card>
      
      {/* 选择规格 */}
      <Card 
        title="选择规格" 
        bordered={false}
        headStyle={{ padding: "0", fontWeight: "normal" }}
        bodyStyle={{ padding: "16px 0" }}
        style={{ marginBottom: 16 }}
      >
        <div style={{ marginBottom: 16 }}>
          <Text strong style={{ display: "block", marginBottom: 8 }}>颜色</Text>
          <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
            {colors.map(color => (
              <Button
                key={color}
                type={selectedColor === color ? "primary" : "default"}
                onClick={() => setSelectedColor(color)}
                style={{ 
                  minWidth: 80,
                  borderColor: selectedColor === color ? "#1890ff" : "#d9d9d9"
                }}
              >
                {color}
              </Button>
            ))}
          </div>
        </div>
        
        <div style={{ marginBottom: 16 }}>
          <Text strong style={{ display: "block", marginBottom: 8 }}>存储</Text>
          <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
            {storages.map(storage => (
              <Button
                key={storage}
                type={selectedStorage === storage ? "primary" : "default"}
                onClick={() => setSelectedStorage(storage)}
                style={{ 
                  minWidth: 80,
                  borderColor: selectedStorage === storage ? "#1890ff" : "#d9d9d9"
                }}
              >
                {storage}
              </Button>
            ))}
          </div>
        </div>
        
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
          <Text strong>数量</Text>
          <InputNumber
            min={1}
            max={99}
            value={quantity}
            onChange={value => setQuantity(value as number)}
            size={isMobile ? "middle" : "large"}
            style={{ width: isMobile ? 120 : 150 }}
          />
        </div>
      </Card>
      
      {/* 商品详情 */}
      <Card 
        bordered={false}
        style={{ marginBottom: 24 }}
      >
        <Tabs defaultActiveKey="1">
          <TabPane tab="商品详情" key="1">
            <div style={{ padding: "16px 0" }}>
              <Text strong style={{ display: "block", marginBottom: 12 }}>产品参数</Text>
              <div style={{ 
                display: "grid", 
                gridTemplateColumns: "repeat(auto-fill, minmax(140px, 1fr))", 
                gap: 12 
              }}>
                {specifications.map((spec, index) => (
                  <div key={index} style={{ background: "#f9f9f9", padding: 8, borderRadius: 4 }}>
                    <Text type="secondary" style={{ fontSize: 12 }}>{spec.name}</Text>
                    <Text style={{ display: "block", fontWeight: 500 }}>{spec.value}</Text>
                  </div>
                ))}
              </div>
              
              <Divider style={{ margin: "24px 0" }} />
              
              <Text strong style={{ display: "block", marginBottom: 12 }}>产品介绍</Text>
              <Text style={{ lineHeight: 1.8 }}>
                搭载旗舰处理器，采用台积电4nm工艺制程，
                性能强劲，功耗更低。配备6.73英寸2K AMOLED超视感屏，支持120Hz智能动态刷新率，
                显示效果出色。后置5000万三摄系统，支持OIS光学防抖，拍照效果出众。
                内置4500mAh大电池，支持67W有线快充，续航无忧。
              </Text>
            </div>
          </TabPane>
          <TabPane tab="用户评价" key="2">
            <div style={{ padding: "16px 0" }}>
              <Text>暂无评价</Text>
            </div>
          </TabPane>
          <TabPane tab="推荐商品" key="3">
            <div style={{ padding: "16px 0" }}>
              <Text>暂无推荐</Text>
            </div>
          </TabPane>
        </Tabs>
      </Card>
      
      {/* 底部操作栏 */}
      <div style={{ 
        position: "fixed",
        bottom: 0,
        left: 0,
        right: 0,
        background: "#fff",
        padding: "12px 16px",
        borderTop: "1px solid #f0f0f0",
        boxShadow: "0 -2px 10px rgba(0, 0, 0, 0.05)",
        zIndex: 100,
        display: "flex",
        justifyContent: "space-between",
        alignItems: "center",
        // display:"none"
      }}>
        <div style={{ display: "flex", gap: 12 }}>
          <Button 
            type="text" 
            icon={<HeartOutlined />} 
            style={{ width: 50, height: 50, display: "flex", flexDirection: "column" }}
          >
            <span style={{ fontSize: 12 }}>收藏</span>
          </Button>
          <Button 
            type="text" 
            icon={<ShareAltOutlined />} 
            style={{ width: 50, height: 50, display: "flex", flexDirection: "column" }}
          >
            <span style={{ fontSize: 12 }}>分享</span>
          </Button>
          <Button 
            type="text" 
            icon={<ShoppingCartOutlined />} 
            style={{ width: 50, height: 50, display: "flex", flexDirection: "column" }}
            onClick={() => setActiveTab("cart")}
          >
            <span style={{ fontSize: 12 }}>购物车</span>
          </Button>
        </div>
        
        <div style={{ display: "flex", gap: 8 }}>
          <Button 
            type="primary" 
            ghost
            style={{ 
              height: isMobile ? 40 : 48,
              fontSize: isMobile ? 14 : 16
            }}
            onClick={() => addToCart({ ...product, quantity })}
          >
            加入购物车
          </Button>
          <Button 
            type="primary" 
            danger
            style={{ 
              height: isMobile ? 40 : 48,
              fontSize: isMobile ? 14 : 16
            }}
            onClick={() => {
              if (!selectedColor || !selectedStorage) {
                message.warning('请选择商品规格');
                return;
              }
              // 直接进入结算流程，不经过购物车
              onBuyNow({
                ...product,
                quantity,
                selectedColor,
                selectedStorage
              });
            }}
          >
            立即购买
          </Button>
        </div>
      </div>
    </div>
  );
}